<template>
  <div class="city">
    <div class="cityNav">
      <van-nav-bar title="当前城市">
        <template #left>
          <van-icon name="cross" color="black" size="18" @click="go"/>
        </template>
      </van-nav-bar>
      <form action="/">
        <van-search v-model="value" show-action placeholder="请输入搜索关键词" />
      </form>
    </div>
    <van-index-bar :index-list="indexList" :sticky="false" style="padding:100px 0 0 0">
      <template v-for="(item,key) in citySort">
        <van-index-anchor :index="key" :key="key" />
        <van-cell
          v-for="iteam in item"
          :id="iteam.cityId"
          :key="iteam.cityId"
          :title="iteam.name"
          @click="cityName"
        />
      </template>
    </van-index-bar>
  </div>
</template>
<script>
import { cityData } from "../api/api";
export default {
  props: [],
  data() {
    return {
      value: "",
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z"
      ],
      city: []
    };
  },
  computed: {
    citySort: function() {
      let obj = {
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        W: [],
        X: [],
        Y: [],
        Z: []
      };
      this.city.forEach(item => {
        if (item.pinyin.substr(0, 1) == "a") {
          obj.A.push(item);
        }
        if (item.pinyin.substr(0, 1) == "b") {
          obj.B.push(item);
        }
        if (item.pinyin.substr(0, 1) == "c") {
          obj.C.push(item);
        }
        if (item.pinyin.substr(0, 1) == "d") {
          obj.D.push(item);
        }
        if (item.pinyin.substr(0, 1) == "e") {
          obj.E.push(item);
        }
        if (item.pinyin.substr(0, 1) == "f") {
          obj.F.push(item);
        }
        if (item.pinyin.substr(0, 1) == "g") {
          obj.G.push(item);
        }
        if (item.pinyin.substr(0, 1) == "h") {
          obj.H.push(item);
        }
        if (item.pinyin.substr(0, 1) == "j") {
          obj.J.push(item);
        }
        if (item.pinyin.substr(0, 1) == "k") {
          obj.K.push(item);
        }
        if (item.pinyin.substr(0, 1) == "l") {
          obj.L.push(item);
        }
        if (item.pinyin.substr(0, 1) == "m") {
          obj.M.push(item);
        }
        if (item.pinyin.substr(0, 1) == "n") {
          obj.N.push(item);
        }
        if (item.pinyin.substr(0, 1) == "p") {
          obj.P.push(item);
        }
        if (item.pinyin.substr(0, 1) == "q") {
          obj.Q.push(item);
        }
        if (item.pinyin.substr(0, 1) == "r") {
          obj.R.push(item);
        }
        if (item.pinyin.substr(0, 1) == "s") {
          obj.S.push(item);
        }
        if (item.pinyin.substr(0, 1) == "t") {
          obj.T.push(item);
        }
        if (item.pinyin.substr(0, 1) == "w") {
          obj.W.push(item);
        }
        if (item.pinyin.substr(0, 1) == "x") {
          obj.X.push(item);
        }
        if (item.pinyin.substr(0, 1) == "y") {
          obj.Y.push(item);
        }
        if (item.pinyin.substr(0, 1) == "z") {
          obj.Z.push(item);
        }
      });
      return obj;
    }
  },
  methods: {
    cityName(val) {
      let id = val.path[1].attributes.id || val.path[2].attributes.id;
      let obj={
        "cityId":id.nodeValue,
        "cityName":val.path[0].innerText
      };
      this.$store.commit("updataCity", obj);
      this.$router.push("/home");
    },
    go(){
      this.$router.push("/home");
    }
  },
  components: {},
  filters: {},
  watch: {},
  created() {
    cityData().then(res => {
      this.city = res.data.data.cities;
    });
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
.city {
  height: 100%;
  background: #fdf3f5;
}
.cityNav {
  position: fixed;
  width: 100%;
  z-index: 99;
}
</style>